<template>
    <div>
        <Top></Top>
        <!-- 地址表格 -->
        <el-row>
            <el-col :span="18" :offset="3">
                <div id="tableDiv">
                    <template>
                        <el-table :data="addresses" style="width: 100%">
                            <el-table-column label="选择" width="70">
                                <template slot-scope="scope">
                                    <el-radio :label="scope.row.id" v-model="aid"></el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column label="收货人" width="120">
                                <template slot-scope="scope">
                                    <el-tag size="medium">{{ scope.row.contactperson }}</el-tag>

                                </template>
                            </el-table-column>

                            <el-table-column label="联系方式" width="150">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.phone }}</span>
                                </template>
                            </el-table-column>
                
                            <el-table-column label="详细地址" width="300">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.address }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" @click="handleDefault(scope.$index, scope.row)"
                                        v-if="scope.row.status == 0">设为默认</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-col>
        </el-row>

        <!-- 添加按钮 -->
        <el-row style="margin: 30px;">
            <el-col :span="2" :offset="19">
                <el-button type="success" @click="centerDialogVisible=true">添加收货地址</el-button>
            </el-col>
        </el-row>
          <!-- 添加地址对话框 -->
          <el-dialog title="新增收货地址" :visible.sync="centerDialogVisible" width="40%" center>
            <Address @quit="centerDialogVisible=false" @submitForm="submitForm"></Address>
         </el-dialog>
        <!-- 选择的商品信息 -->
        <el-row>
            <el-col :span="18" :offset="3">
                <div id="tableDiv">
                    <template>
                        <el-table :data="carts" style="width: 100%">
                            <el-table-column label="缩略图" width="150px">
                                <template slot-scope="scope">
                                    <img :src="scope.row.pic" style="width:90px;height:90px">
                                </template>
                            </el-table-column>
                            <el-table-column label="店铺商品" width="200">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="价格" width="140" align="center">
                                <template slot-scope="scope">

                                    <el-tag size="medium">{{ (scope.row.salePrice ).toFixed(2)}}元/{{scope.row.uname}}</el-tag>

                                </template>
                            </el-table-column>
                            <el-table-column label="数量" width="150" align="center">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ (scope.row.num).toFixed(2) }}&nbsp;{{scope.row.uname}}</span>

                                </template>
                            </el-table-column>


                            <el-table-column label="小计" width="150" align="center">
                                <template slot-scope="scope">

                                    <span style="margin-left: 10px">{{ (scope.row.salePrice * scope.row.num).toFixed(2)}}元</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>

            </el-col>
        </el-row>

        <el-row style="margin-top: 30px;">
               <el-col :span="6" :offset="16">
                <span class="price" style="margin-right: 20px;">总计：{{getTotal().toFixed(2)}} 元</span>
                <el-button type="danger" @click="makeOrder">确认下单</el-button>
            </el-col>

        </el-row>






        <Footer></Footer>

    </div>


</template>

<script>
import Top from '../commons/Top.vue'
import Footer from '../commons/Footer.vue'

import Address from "../commons/Address.vue";
export default {
    data() {
        return {
            carts: JSON.parse(sessionStorage.getItem("carts")),
            addresses: [],
            aid: null,   //选择的地址

            //新增地址表单
            centerDialogVisible:false,

            //下单商品表格
            orderCarts:[]   //下订单要传的参数
        

        }

    },
    components: {
        Top, Footer,Address

    },
    methods: {
        handleDefault(index, row) {

        },
        getTotal() {
            let total = 0;
            let orderCarts=[]
            for (const cart of this.carts) {
                //1.计算总价
                total += cart.num * cart.salePrice;
                //2.将当前cid和num放入传参数组中
                orderCarts.push(cart.id+"_"+cart.num)
            }
            this.orderCarts=orderCarts
            return total;
        },
        //添加地址表单组件发射的提交方法
        submitForm(address){
            this.$axios.post("/address/add",address).then(respData=>{
                //将id设置到address中，再将address添加到addressList
                address.id=respData.data.data
                if(address.status==1){
                    this.aid=address.id
                }
                this.centerDialogVisible=false
                this.addresses.push(address)
               
                
            })
        },
        // 下单按钮点击事件
        makeOrder(){
            if(this.aid==null){
                this.$message({
                    message:"请添加地址信息",
                    type:"error"
                })
                return
            }
            let temp={
                aid:this.aid,
                orderCarts:this.orderCarts,
                totalmoney :this.getTotal()

            }
            console.log(temp)

            this.$axios.post("/order/makeOrder",temp).then(respData=>{
                console.log(respData.data.data)
                if(respData.data.code=200){
                //将返回数据存储到session
                    sessionStorage.setItem("order_pay",JSON.stringify(respData.data.data))
                    this.$router.push("/pay")

                }

               

            })


        }

    },

    mounted() {
        this.$axios.get("/address/queryByUid").then(respData => {
            console.log("打印查询出的地址信息！")
            console.log(respData)
            this.addresses = respData.data.data
            for(const addr of this.addresses){
                 if(addr.status == 1){
                    this.aid=addr.id
                    break;
                 }
            }

        })
    }

}


</script>


<style scoped>
.price{
    color:red;
    font-size:20px
} 
</style>